<template>
  <el-dialog
    :visible.sync="visible"
    :modal="false"
    width="1947px"
    :before-close="handleClose">
    <div class="flex-between title" slot="title">
      <span>{{title}}</span>
      <img @click="handleClose" class="close-btn" src="../../../assets/imgs/close_btn.png" alt="">
    </div>
    <div class="dialog-body flex-column">
      <div class="tools flex-box">
        <el-input class="input-area" v-model="workshopName" placeholder="请输入报警区域"></el-input>
        <el-date-picker
          class="ml-20"
          v-model="dateRange"
          type="daterange"
          value-format="timestamp"
          range-separator="-"
          :picker-options="datePickerOptions"
          format="yyyy-MM-dd"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </el-date-picker>
        <el-button type="primary" class="ml-20" @click="getData(1)" :loading="loading">搜索</el-button>
      </div>
      <div class="my-table">
        <el-table
          class=""
          stripe
          :row-class-name="onTableRowClassName"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
          >
          </el-table-column>
          <el-table-column
            prop="workshopName"
            label="区域"
          >
          </el-table-column>
          <el-table-column
            prop="alarmValue"
            label="阈值">
          </el-table-column>
          <el-table-column
            prop="realityValue"
            label="实时值">
          </el-table-column>
          <el-table-column
            prop="alarmContent"
            label="事件">
          </el-table-column>
        </el-table>
      </div>

      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="limit"
          layout="total,  prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

  </el-dialog>
</template>
<script>
  import {warningData} from '../../../api/api'

  export default {
    name:'warning',
    data(){
      return{
        visible:false,
        loading:false,
        dateRange:[],
        workshopName:'',
        page:1,
        limit:15,
        total:0,
        tableData: []
      }
    },
    computed:{
      datePickerOptions(){
        return {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      }
    },
    props:{
      title:{
        type:String,
        default:''
      }
    },
    methods:{
      onTableRowClassName({row, rowIndex}){
        if (rowIndex%2==0) {
          return 'statistics-warning-row';
        } else {
          return 'statistics-warning-row-2';
        }
      },
      handleCurrentChange(page){
        this.page = page;
        this.getData(page)
      },
      getData(page = this.page){
        this.page = page;
        this.loading = true
        let params = {
          current:this.page,
          size:this.limit,
          workshopName:this.workshopName,
        }
        if(this.dateRange && this.dateRange.length){
          params.startTime = this.dateRange[0];
          params.endTime = this.dateRange[1];
        }
        warningData(params).then(res=>{
          this.total = res.total||0
          this.tableData = res.records||[]
          this.loading = false
        }).catch(err=>{
          this.total = 0;
          this.tableData = [];
          this.loading = false
          this.$message.error(err)
        })
      },
      showModal(){
        this.visible = true
        this.getData(1)
      },
      handleClose(){
        this.visible = false
      },
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-body {
    height: 1200px;
    padding: 0 80px;
    .tools{
      margin-bottom: 40px;
      .input-area{
        width: 330px;
      }
    }
    .page{
      margin-top: 20px;
      display: flex;
      justify-content: right;
    }

  }
</style>
